
<template>
  <div ref="echart" style="width: 100%; height: 100%" id="mychart"></div>
</template>
  
<script>
import * as echarts from 'echarts'
import homeApi from '../../api/home'

export default {
  props: {
    dateFlags: {
      type: String,
      default() {
        return '02'
      }
    },
    handelCardName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      yData: [],
      dataList: [],
      optionsTow: {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'shadow'
          // },
          // formatter: '{b0}<br />{a0}:{c0}%',
          // formatter: function (value, index) {
          //     return '及时率'+ value * 100 + '%'
          //   }
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: [],
          boundaryGap:false,
          axisLine: {
            show: false // 是否显示坐标轴轴线
          },
          axisTick: {
            alignWithLabel: true,
            show: true, // 是否显示刻度标签
            lineStyle: {
              color: '#e0e6f1', // 刻度线的颜色
              type: 'solid' // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
            }
          }
        },
        yAxis: {
          min: 0,
          max: 1,
          interval: 0.2,
          margin: [0, 200, 70, 0],
          axisLabel: {
            formatter: function (value, index) {
              return value * 100 + '%'
            }
          }
        },

        // boundaryGap: false,
        // data: ['0%', '15%', '30%', '45%', '60%', '75%']

        series: [
          {
            name: '及时率',
            data: [],
            type: 'line',
            symbol: 'circle',
            axisTick: {
              alignWithLabel: true
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#fdfeff'
                }
              ])
            }
          }
        ]
      },
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(params) {

							return params+"%"
						},
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#ea5404'
                      },
                      {
                        offset: 1,
                        color: '#ffffff'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#ea5404'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
    }
  },

  mounted() {
    this.initChart()
  },
  watch: {
    dateFlags: {
      handler(val) {
        this.dateFlags = val
        this.initChart()
      }
    },
    handelCardName: {
      handler(val) {
        this.handelCardName = val
        this.initChart()
      }
    }
  },
  methods: {
    initChart() {
      let chart = this.$echarts.init(document.getElementById('mychart'))
      // this.echart = echarts.init(this.$refs.echart)
      homeApi.getPieEchartsData({ dateFlag: this.dateFlags }).then(res => {
        if (res.data.code == '200') {
          let data = res.data.data
          this.dataList = []
          this.optionsTow.xAxis.data = []
          this.optionsTow.series[0].data = []
          let monthData = []
          let num = 0
          let testData = []
          let xData = []
          let trgNodes = data.map(item => {
            if (item.trgNode == this.handelCardName) {
              if (this.dateFlags == '04') {
                item.submitStatVos.forEach(element => {
                  let dateData = element.day
                  testData.push(dateData)
                  let month = new Date(dateData).getMonth()
                  //获取到月份
                  monthData.push(month)
                })
                let n = monthData[monthData.length - 1] - monthData[0]
                // let newArr = [...new Set(testData)]
                let staDate = new Date(testData[0])
                let endDate = new Date(testData[testData.length - 1])
                num = (endDate - staDate) / (1000 * 3600 * 24)
                //获取到天数
                let days = parseInt(Math.ceil(num))
                //计算当选中全部时，日期如果小于31天且 n=0即在同一个月中时，就取天数作为横坐标
                if (days <= 31 && n == 0) {
                  item.submitStatVos.forEach(ObjData => {
                    if (ObjData.avgSubmitRoit != null) {
                      xData.push(ObjData.day)
                      // this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
                      // this.yData.push(Number(ObjData.avgSubmitRoit) == 0 ? '-' :  parseInt((Number(ObjData.avgSubmitRoit))*100)  + '%')
                      this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
                    } else {
                      xData.push(ObjData.day)
                      this.optionsTow.series[0].data = []
                    }
                  })
                } else {
                  item.submitStatVos.forEach(ObjData => {
                    if (ObjData.avgSubmitRoit != null) {
                      xData.push(ObjData.month)
                      // this.optionsTow.xAxis.data.push(ObjData.month)
                      // this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
                      this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
                    } else {
                      xData.push(ObjData.month)
                      this.optionsTow.series[0].data = []
                    }
                  })
                }
              } else {
                item.submitStatVos.forEach(element => {
                  if (element.avgSubmitRoit != null) {
                    xData.push(element.day)
                    // this.yData.push(Number(element.avgSubmitRoit).toFixed(2))
                    this.optionsTow.series[0].data.push(Number(element.avgSubmitRoit))
                  } else {
                    xData.push(element.day)
                    this.optionsTow.series[0].data = []
                  }
                })
              }
              this.optionsTow.xAxis.data = [...new Set(xData)]
              chart.setOption(this.optionsTow)
            }
            // if (item.submitStatVos && item.submitStatVos.length > 0) {
            //   if (item.name == this.handelCardName || item.name == 'total') {
            //     if (this.dateFlags == '04') {
            //       item.submitStatVos.forEach(element => {
            //         let dateData = element.day
            //         testData.push(dateData)
            //         let month = new Date(dateData).getMonth()
            //         //获取到月份
            //         monthData.push(month)
            //       })
            //       let n = monthData[monthData.length - 1] - monthData[0]
            //       // let newArr = [...new Set(testData)]
            //       let staDate = new Date(testData[0])
            //       let endDate = new Date(testData[testData.length - 1])
            //       num = (endDate - staDate) / (1000 * 3600 * 24)
            //       //获取到天数
            //       let days = parseInt(Math.ceil(num))
            //       //计算当选中全部时，日期如果小于31天且 n=0即在同一个月中时，就取天数作为横坐标
            //       if (days <= 31 && n == 0) {
            //         item.submitStatVos.forEach(ObjData => {
            //           if (ObjData.avgSubmitRoit != null) {
            //             xData.push(ObjData.day)
            //             this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
            //             this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
            //           } else {
            //             xData.push(ObjData.day)
            //             this.optionsTow.series[0].data = []
            //           }
            //         })
            //       } else {
            //         item.submitStatVos.forEach(ObjData => {
            //           if (ObjData.avgSubmitRoit != null) {
            //             xData.push(ObjData.month)
            //             // this.optionsTow.xAxis.data.push(ObjData.month)
            //             this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
            //             this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
            //           } else {
            //             xData.push(ObjData.month)
            //             this.optionsTow.series[0].data = []
            //           }
            //         })
            //       }
            //     } else {
            //       item.submitStatVos.forEach(element => {
            //         if (element.avgSubmitRoit != null) {
            //           xData.push(element.day)
            //           this.yData.push(Number(element.avgSubmitRoit).toFixed(2))
            //           this.optionsTow.series[0].data.push(Number(element.avgSubmitRoit))
            //         } else {
            //           xData.push(element.day)
            //           this.optionsTow.series[0].data = []
            //         }
            //       })
            //     }
            //   }
            //   this.optionsTow.xAxis.data = [...new Set(xData)]
            //   chart.setOption(this.optionsTow)
            //   // let avgSubmitRoit = item.submitStatVos[item.submitStatVos.length - 1].avgSubmitRoit
            //   // let obj = {}
            //   // obj['name'] = item.trgNode
            //   // obj['percent'] = Number(avgSubmitRoit).toFixed(2) * 100 + '%'
            //   // obj['data'] = item.submitStatVos
            //   // this.dataList.push(obj)
            // }
          })

          // if (this.dataList.length > 0) {
          //   this.dataList.forEach(item => {
          //     if (item.name == this.handelCardName || item.name == 'total') {
          //       if (this.dateFlags == '04') {
          //         let testData = []
          //         let monthData = []
          //         let num = 0
          //         item.data.forEach(dateItem => {
          //           let dateData = dateItem.day
          //           testData.push(dateData)
          //           let month = new Date(dateData).getMonth()
          //           //获取到月份
          //           monthData.push(month)
          //         })
          //         let n = monthData[monthData.length - 1] - monthData[0]
          //         // let newArr = [...new Set(testData)]
          //         let staDate = new Date(testData[0])
          //         let endDate = new Date(testData[testData.length - 1])
          //         num = (endDate - staDate) / (1000 * 3600 * 24)
          //         //获取到天数
          //         let days = parseInt(Math.ceil(num))
          //         let xData = []
          //         // this.optionsTow.xAxis.data = []
          //         if (days <= 31 && n == 0) {
          //           item.data.forEach(ObjData => {
          //             if (!Number(ObjData.avgSubmitRoit)) {
          //               xData.push(ObjData.day)
          //               this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
          //               this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
          //             } else {
          //               xData.push(ObjData.day)
          //             }
          //           })
          //         } else {
          //           // let xData = []
          //           item.data.forEach(ObjData => {
          //             xData.push(ObjData.month)
          //             // this.optionsTow.xAxis.data.push(ObjData.month)
          //             this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
          //             this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
          //           })
          //         }
          //         this.optionsTow.xAxis.data = [...new Set(xData)]
          //       } else {
          //         let xData = []
          //           item.data.forEach(ObjData => {
          //             if (ObjData.avgSubmitRoit!=null) {
          //               xData.push(ObjData.day)
          //               this.yData.push(Number(ObjData.avgSubmitRoit).toFixed(2))
          //               this.optionsTow.series[0].data.push(Number(ObjData.avgSubmitRoit))
          //             } else {
          //               xData.push(ObjData.day)
          //               this.optionsTow.series[0].data = []
          //             }
          //           })
          //         this.optionsTow.xAxis.data = [...new Set(xData)]
          //       }
          //       chart.setOption(this.optionsTow)
          //     } else {
          //       // this.optionsTow.xAxis.data = []
          //     }
          //   })
          // } else {
          //   this.optionsTow.xAxis.data = []
          //   this.optionsTow.series[0].data = []
          //   chart.setOption(this.optionsTow)
          // }
        }
      })

      window.addEventListener('resize', function () {
        chart.resize()
      })
      // })
    }
  },
  resizeEcharts() {},
  beforeDestroy() {}
}
</script>
<style lang="less" scoped>
#mychart {
  top: -16px;
}
</style>
